<template>
    <el-dialog
        v-model="visible"
        :close-on-click-modal="false"
        :title="'为' + userRealName + '分配角色'"
        draggable="true"
        width="800px"
    >
        <el-form label-width="80px">
            <el-form-item label="选择角色" prop="roles">
                <el-transfer
                    filterable
                    :filter-method="filterMethod"
                    filter-placeholder="筛选"
                    v-model="checkedIds"
                    :data="roles"
                    :format="{
                        noChecked: '${total}',
                        hasChecked: '${checked}/${total}',
                      }"
                    :titles="['全部角色', '已分配']"
                    style="text-align: left; display: inline-block;"
                    @change="handleChange"
                ></el-transfer>
            </el-form-item>

        </el-form>

        <template #footer>
			<span class="dialog-footer">
				<el-button size="medium" @click="visible = false">取消</el-button>
				<el-button size="medium" type="primary" @click="submit">确定</el-button>
			</span>
        </template>
    </el-dialog>
</template>

<script>

export default {
    name: "UserRoleView",
    data() {
        return {
            roles: [],
            assignedRoles: [],
            visible: false,
            userId: '',
            userRealName: '',
            total: 0,
            checked: 0,
            checkedIds: []
        }
    },
    methods: {
        open(user) {
            this.$nextTick(() => {
                this.visible = true
                this.userId = user.id
                this.userRealName = user.realName
                this.loadRole()
                this.loadAssigned()
            })
        },

        submit() {
            let params = {
                userId: this.userId,
                roleIds: this.checkedIds
            }
            this.$http.post('/admin/user/grantRoles', params).then(resp => {
                if (resp.success) {
                    this.visible = false
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 3000
                    })
                    this.$emit('load');
                }
            })
        },

        loadRole() {
            let params = {params: {size: 1000}};
            this.$http.get('/admin/role/list', params).then(resp => {
                this.roles = resp.data
                this.total = this.roles.length
                this.roles.forEach(function (value, index, array) {
                    value.key = value.id
                    value.label = `${value.role}（${value.name}）`
                })
            }).catch(e => {
            })
        },

        loadAssigned() {
            let params = {
                params:
                    {
                        userId: this.userId
                    }
            };
            this.$http.get('/admin/user/selectUserRoles', params).then(resp => {
                this.checkedIds = resp.data.map(i => i.id)
                this.checked = this.checkedIds.length
            }).catch(e => {
            })
        },

        filterMethod(query, item) {
            if (!query) return true;
            return item.description.indexOf(query) >= 0 || item.name.indexOf(query.toLowerCase())>=0
        },

        handleChange() {

        },

        /**
         * 选择应用
         */
        appChange(val) {
            this.loadRole()
            this.loadAssigned()
        }
    }
}
</script>

<style scoped>
.el-transfer-panel {
    width: 300px !important;
}
</style>